<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<unitParentSelectTree v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.nickname' prop='nickname'>
					<el-input v-model.trim='formInline.nickname' clearable :placeholder='prompt?.nickname'
						:maxlength="30" show-word-limit />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.loginName' prop='loginName'>
					<el-input v-model.trim='formInline.loginName' clearable :placeholder='prompt?.loginName'
						:disabled="formInline?.id" :formatter="(value) => value.replace(ACCOUNT_REG.inputFormat, '')"
						:parser="(value) => value.replace(ACCOUNT_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.password' prop='password'>
					<el-input v-model.trim='formInline.password' clearable :placeholder='prompt?.password'
						type="password" show-password />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.confirmPassword' prop='confirmPassword'>
					<el-input v-model.trim='formInline.confirmPassword' clearable :placeholder='prompt?.confirmPassword'
						type="password" show-password />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.phone' prop='phone'>
					<el-input v-model.trim='formInline.phone' clearable :placeholder='prompt?.phone' />
				</el-form-item>
			</re-col>
			<!-- <re-col :value='12' :xs='12' :sm='12' v-if="formInline.isSuper != 1">
				<el-form-item :label='titles?.roleIds' prop='roleIds'>
					<usersRoleSelect v-model='formInline.roleIds' clearable :placeholder='prompt?.roleIds' multiple
						:style="{ width: '100%' }" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12' v-else>
				<el-form-item :label='titles?.roleIds'>
					<el-text>
						单位 {{ isNullOrEmpty( formInline?.unityName ) }} 超级管理员
					</el-text>
				</el-form-item>
			</re-col> -->
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.allowPortal' prop='allowPortal'>
					<el-select v-model="formInline.allowPortal" :placeholder="prompt?.allowPortal" multiple>
						<el-option v-for="item in PLATFORM_LIST_SELECT" :key="item.value" :label="item.name"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.expireDate' prop='expireDate'>
					<div class="w-full flex gap-[20px] items-center">
						<el-select v-model="formInline.isPermanently" :style="{ width: '120px' }"
							@change="isPermanentlyChange">
							<el-option v-for="item in [{ value: 1, name: '永久' }, { value: 2, name: '限期' }]"
								:key="item.value" :label="item.name" :value="item.value" />
						</el-select>
						<el-date-picker v-model="formInline.expireDate" type="date" :placeholder="prompt?.expireDate"
							clearable format="YYYY/MM/DD" value-format="YYYY-MM-DD" :style="{ width: '100%' }"
							@change="expireDateChange" />
					</div>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='12' :sm='12'>
				<el-form-item :label='titles?.status' prop='status'>
					<el-radio-group v-model='formInline.status'>
						<el-radio v-for="item in USER_STATUS" :key="item.value" :value="item.value">
							{{ isNullOrEmpty(item.label) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" type="textarea" :autosize="{ minRows: 4 }"
						v-model.trim='formInline.remark' clearable :placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/users-manager/users-manager/index';
import { PHONE_REG, PASSWORD_REG, PLATFORM_LIST_SELECT, ACCOUNT_REG } from '@/constant/index'
import { USER_STATUS } from '@/constant/unit-settings'
import { isEmpty } from "@pureadmin/utils";
import unitParentSelectTree from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
	expireDate: [{ required: false, message: prompt?.expireDate, trigger: 'blur' },
	{
		validator: (rule, value, callback) => {
			if (!value && props.formInline.isPermanently != 1) {
				callback(new Error(prompt?.expireDate));
			} else {
				callback();
			}
		}, trigger: 'blur'
	}],
	nickname: [{ required: true, message: prompt?.nickname, trigger: 'blur' },],
	loginName: [
		{ required: true, message: prompt?.loginName, trigger: 'blur' },
		{ pattern: ACCOUNT_REG.role, message: ACCOUNT_REG.text, trigger: 'blur' }
	],
	password: [
		{ required: true, message: prompt?.password, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: prompt?.confirmPassword, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== props.formInline.password) {
					callback(new Error('两次密码输入不一致'));
				} else {
					callback();
				}
			}
		}
	],
	phone: [
		{ required: true, message: prompt?.phone, trigger: 'blur' },
		{ pattern: PHONE_REG.role, message: PHONE_REG.text, trigger: 'blur' }
	],
	lastLoginTime: [{ required: true, message: prompt?.lastLoginTime, trigger: 'blur' },],
	lastLoginIP: [{ required: true, message: prompt?.lastLoginIP, trigger: 'blur' },],
	roleIds: [{ required: true, message: prompt?.roleIds, trigger: 'blur' },],
	roleName: [{ required: true, message: prompt?.roleName, trigger: 'blur' },],
	allowPortal: [{ required: true, message: prompt?.allowPortal, trigger: 'blur' },],
	authorizedUnityNum: [{ required: true, message: prompt?.authorizedUnityNum, trigger: 'blur' },],
	status: [{ required: true, message: prompt?.status, trigger: 'blur' },],
});
const ruleFormRef = ref();
function setFormRules() {
	formRules.password = [
		{ required: false, message: prompt?.password, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' }
	]
	formRules.confirmPassword = [
		{ required: false, message: prompt?.confirmPassword, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== props.formInline.password && !isEmpty(value) && !isEmpty(props.formInline.password)) {
					callback(new Error('两次密码输入不一致'));
				} else {
					callback();
				}
			}
		}
	]
}
const isPermanentlyChange = () => {
	console.log(props.formInline.isPermanently);

	if (props.formInline.isPermanently == 1) {
		props.formInline.expireDate = null
	}
}

const expireDateChange = () => {
	if (props.formInline.expireDate) {
		props.formInline.isPermanently = 2
	} else {
		props.formInline.isPermanently = 1
	}
}

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef, setFormRules });
</script>
